Fixes #2356
Fixes #2962

Summary

In order to address WCAG A guidelines, a skip link should be provided that allows keyboard and screen reader users to bypass navigation and jump to the main content of the page.

As discussed in #2356 , the consensus approach was to:

1. Add a showOnFocus prop to EuiScreenReaderOnly that forces the display of visually hidden content when it receives focus via keyboard, and
2. Create a new EuiSkipLink component that leverages the aforementioned prop while providing additional styles.

Notes

Docs fix

This PR also fixes the empty Props tab for EuiScreenReaderOnly as noted in #2962 . This component only returns a cloned element (no JSX), so a workaround pattern suggested by @chandlerprall was used to populate the Props tab.

Regarding the EuiSkipLink docs example

Due to the way the EUI routing system handles hashed URLs, the EuiSkipLink component does not currently work on the EUI docs site (i.e. it treats an anchor href like href="a11ySkipToMain" as a new URL).

Once the upcoming infrastructure work towards a static system is in place, we can hook this up properly on the EUI site. In the meantime, I've added a TODO regarding an override in the code and a note on the docs example explaining that the link won't work.

For that reason, the "Skip to main content" link will only appear when you tab into the Utilities > Accessibility page (i.e. doesn't work globally) and I'm thus using an EuiPortal and tabIndex={1} to effectively fake it for the time being. Ultimately, this will live near the top of the body.

Keyboard focus in Firefox

For mac users, the skip to content won't display unless you've complete the two items in the first answer of this SO post: https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox

IE11

It does display in IE11, but the tab order feels slightly off. That said, due to the aforementioned issues with making this work in the EUI docs, I'm using an EuiPortal so its not really at the top of markup since I'm not able to make this work globally (yet).

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately